<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<div class="ms-PeoplePicker ms-PeoplePicker--facePile">
  <label class="ms-Label">People picker</label>
  <div class="ms-PeoplePicker-searchBox">
    <input class="ms-PeoplePicker-searchField" type="text">
  </div>
  <div class="ms-PeoplePicker-results">
      <div class="ms-PeoplePicker-resultGroups">
          <div class="ms-PeoplePicker-resultGroup">
              <ul class="ms-PeoplePicker-resultList">
                  <li class="ms-PeoplePicker-result">
                    <button class="ms-PeoplePicker-resultBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Russel Miller</div>
                          <div class="ms-Persona-secondaryText">Sales</div>
                        </div>
                      </div>
                    </button>
                  </li>
                  <li class="ms-PeoplePicker-result">
                    <button class="ms-PeoplePicker-resultBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Douglas Fielder</div>
                          <div class="ms-Persona-secondaryText">Public Relations</div>
                        </div>
                      </div>
                    </button>
                  </li>
                  <li class="ms-PeoplePicker-result">
                    <button class="ms-PeoplePicker-resultBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Bill B. (billb)</div>
                          <div class="ms-Persona-secondaryText">Public Relations</div>
                        </div>
                      </div>
                    </button>
                  </li>
                  <li class="ms-PeoplePicker-result">
                    <button class="ms-PeoplePicker-resultBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Grant Steel (bask)</div>
                          <div class="ms-Persona-secondaryText">Public Relations</div>
                        </div>
                      </div>
                    </button>
                  </li>
                  <li class="ms-PeoplePicker-result">
                    <button class="ms-PeoplePicker-resultBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Harvey Wallin</div>
                          <div class="ms-Persona-secondaryText">Delivery</div>
                        </div>
                      </div>
                    </button>
                  </li>
                  <li class="ms-PeoplePicker-result">
                    <button class="ms-PeoplePicker-resultBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Marcus Lauer</div>
                          <div class="ms-Persona-secondaryText">Marketing</div>
                        </div>
                      </div>
                    </button>
                  </li>
              </ul>
          </div>
      </div>
  </div>
  <div class="ms-PeoplePicker-selected">
    <div class="ms-PeoplePicker-selectedHeader">
      <span class="ms-PeoplePicker-selectedCount"></span> newly added member<span>s</span>
    </div>
    <ul class="ms-PeoplePicker-selectedPeople"></ul>
  </div>
</div>